<template>
  <u-scroll-list :indicator="options.length > 4" indicatorActiveColor="#282828">
    <div class="common-type-list">
      <div
        class="type-item"
        v-for="item in options"
        :key="item.value"
        @click="onItemClick(item)"
      >
        <img class="type-icon" :src="item.icon" />
        <div>{{ item.label }}</div>
      </div>
    </div>
  </u-scroll-list>
</template>

<script setup>
defineProps({
  options: {
    type: Array,
    default: () => [],
  },
  value: {
    type: String,
    default: "",
  },
});

const emit = defineEmits(['change'])
const onItemClick = (data) => {
  emit('change', data)
}
</script>

<style lang="scss">
.common-type-list {
  margin-top: 20px;
  margin-bottom: 10px;
  display: flex;
  padding: 0 24px;
  .type-item {
    width: 48px;
    height: 70px;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin-right: 44px;
    &:last-child {
      margin-right: 0;
    }
    .type-icon {
      height: 48px;
      width: 48px;
    }
  }
}
</style>
